<template>
  <div class="flex flex-row align-center">
    <div
      class="ws_btns flex flex-row align-center"
      v-if="readerUse"
    >
      <el-button-group class="flex flex-row align-center">
        <el-button
          v-for="item in typeOptions"
          :key="item.type"
          v-if="item.isHide != 'true'"
          style="color: #ff7600;"
          plain
          size="small"
          :class="{ws_btn_on: readerType === item.type}"
          @click="wsChange(`${item.type}`, '')"
        >
          {{item.name}}
        </el-button>
      </el-button-group>
    </div>
    <CardReaderLoad :cr-load-visible.sync="crLoadVisible"/>
  </div>
</template>

<script>
import { getLocalStorage } from '@/utils/localStorage'
import { isIdCard } from '@/utils/validate'
import { getAreaNameToDriveTypeObj, isNull, getKyReaderCardOptions } from '@/utils/utils'
import SocketStart from '@/utils/webSocket'
// import bus from '@/api/bus'
import rtUtil from '@/components/WSCardReaderNew/readerType'
import CardReaderLoad from './cardReaderLoad'
import { mapGetters } from 'vuex'
let queryTextNew = ''
const kycr_href = 'kycr://hello'
export default {
  components: {
    CardReaderLoad
  },
  props: {
    from: {
      type: String,
      default: ''
    },
    btnSize: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      // isMoreReadCardCheck: window.g.isMoreReadCardCheck,
      crLoadVisible: false, // 是否弹出安装读卡器的提示框
      readerUse: window.g.READERUSE || true,
      WSReader: null, // websocket 获取社保卡、医保凭证 用户信息
      readerType: '',
      warnNum: 0,
      typeOptions: [],
      readerFlag: false,
      timer: null,
      timeNum: 0,
      isInstallKycr: false,
      applyInfoHospital: window.g.applyInfoHospital || '',
      hospitalCode: this.$store.state.user.hospitalCode
    }
  },
  computed: {
    ...mapGetters(['cardId', 'is_smk_btn_disable']),
    appConfig() {
      return this.$store.state.settings.appConfig
    },
    KYCARDREADER_OPTIONS() {
      // console.log('KYCARDREADER_OPTIONS================对比arr和options')
      let arr = ((this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.kyReaderCardNameArr && this.appConfig.baseConfig.kyReaderCardNameArr.length) && this.appConfig.baseConfig.kyReaderCardNameArr) || []
      // console.log('arr', arr)
      let options = getKyReaderCardOptions(arr) // 根据arr中的id来找到对应的读卡器完整参数
      // console.log('options', options)
      return (options.length && options) || window.g.KYCARDREADER_OPTIONS || window.g.KYCARDREADER_OPTIONS_FUDING
    },
    zhybpzapi() { // 获取配置参数中的智慧医保凭证地址
      return (this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.zhybpzapi) || 'http://100.72.5.131:8004/localcfc/api/hsecfc/localQrCodeQuery'
    },
    driveType() {
      return ((this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.driveType && this.appConfig.baseConfig.driveType.length) && this.appConfig.baseConfig.driveType) || []
    },
    driveTypeArr() {
      return ((this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.driveTypeArr && this.appConfig.baseConfig.driveTypeArr.length) && this.appConfig.baseConfig.driveTypeArr) || []
    },
    orgId() { // 获取配置参数中的机构代码
      return (this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.orgId) || 'H33108300201'
    },
    dzybpzField() { // 刷医保凭证后的取值字段
      return (this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.dzybpzField) || 'IDNum'
    },
    queryWayText() { // 刷医保凭证后的取值字段
      return (this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.queryWayText) || '身份证号'
    },
    isMoreReadCardCheck() { // 是否有多种品牌的读卡器
      return (this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.isMoreReadCardCheck) || window.g.isMoreReadCardCheck
    }
  },
  created() {
    this.readerCardOption = this.KYCARDREADER_OPTIONS || window.g.KYCARDREADER_OPTIONS || window.g.KYCARDREADER_OPTIONS_FUDING || rtUtil.defaultType
    // console.log('WSCardReaderNew=>created() => this.readerCardOption', this.readerCardOption)
  },
  mounted() {
    // 调用这个函数，是为了万一存在两种读卡器一起使用的时候，要通过getTypeOptions判断来获取新的读卡器参数列表
    this.typeOptions = rtUtil.getTypeOptions(this.readerCardOption)
    if (this.isMoreReadCardCheck) { // 目前就福鼎市医院配置了多个读卡器
      // 福鼎市医院：福鼎市医院的配置参数里有磁条卡，但是按钮里需要隐藏，市民卡按钮需额外改成医保卡
      this.typeOptions = this.typeOptions.filter(item => item.name != '磁条卡')
      if (this.applyInfoHospital == 'fuding') {
        this.typeOptions.forEach((item, index) => {
          if (item.name == '市民卡') {
            this.typeOptions[index].name = '医保卡'
          }
          if (item.name == '医保凭证') {
            this.typeOptions[index].name = '医保码'
          }
        })
      }
    }
    // console.log('this.typeOptions', this.typeOptions)
  },
  methods: {
    initData() {
      // console.warn('初始化数据=>initData')
      this.crLoadVisible = false // 是否弹出安装读卡器的提示框
      this.WSReader = null // websocket 获取社保卡、医保凭证 用户信息
      this.readerType = ''
      this.warnNum = 0
      this.readerFlag = false
      window.timer = null
      this.timeNum = 0
      this.isInstallKycr = false
    },
    // 判断是否安装服务
    protocolCheck() {
      return new Promise(resolve => {
        window.protocolCheck(kycr_href,
          () => {
            resolve(true)
          },
          () => {
            resolve(false)
          }
        )
      })
    },
    // 建立连接
    async wsInit() {
      const that = this
      that.WSReader = new SocketStart({
        url: 'ws://localhost:9000',
        onopen() {
          if (that.readerType) {
            // that.$store.dispatch('app/setWebsoketisOpen', true)
            that.sendMsg()
          }
        },
        onmessage(res) {
          that.closeTimer()
          if (res.Data) {
            const resData = { ...res.Data }
            that.WSCREmit(resData)
          } else if (res) {
            if (res.Message) {
              // console.warn('res.Message', res.Message)
              // that.$message.warning(res.Message)
            }
            that.WSCREmit(res)
          }
        },
        onclose() {
          // that.$store.dispatch('app/setWebsoketisOpen', false)
          that.closeTimer()
          // 断开连接的话，去掉当前实例
          that.WSReader = null
        },
        async onerror(data) {
          // that.$store.dispatch('app/setWebsoketisOpen', false)
          that.closeTimer()
          // that.warnNum++
          // console.error('连接出错:', that.warnNum)
          that.crLoadVisible = await that.protocolCheck()
          // 为了避免一次弹出连两个弹窗(打开读卡器和安装读卡器的弹窗)
          if (getLocalStorage('isInstallKyReader') == '1') {
            that.crLoadVisible = false
          }
        }
      })
    },
    closeWebsocket() {
      console.warn('断开')
      // 主动断开websocket链接
      try {
        if (this.WSReader && this.WSReader.ws) {
          this.WSReader.ws.onclose()
        }
      } catch (e) {
        // TODO handle the exception
        console.warn('catch', e)
      }
      this.WSReader = null
      this.initData()
    },
    // 刷卡成功后的数据传递
    deliverData(res) {
      const typeList = rtUtil.getTypeOptions(this.readerCardOption)
      const currTypeObj = typeList.find(ty => ty.type === this.readerType)
      const numSlice = currTypeObj ? currTypeObj.numSlice : ''
      // let params = {
      //   ...res,
      //   numSlice
      // }
      let searchText = ''
      let searchWay = ''
      if (res.IDNum) {
        // 身份证号、电子医保凭证
        // console.warn('this.dzybpzField', this.dzybpzField)
        // console.warn('this.queryWayText', this.queryWayText)
        if (res[this.dzybpzField]) {
          searchText = res[this.dzybpzField]
          searchWay = this.queryWayText
        } else {
          this.$message.warning(`未查询到该患者的${this.queryWayText}, 请通过其他方式查询`)
        }
      } else if (res.idNo) {
        // 身份证号、电子医保凭证（异地)
        searchText = res.idNo
        searchWay = '身份证号' // 身份证号
      } else if (res.CardIDCode) {
        // 病人ID
        searchText = res.CardIDCode
        searchWay = '病人ID' // 病人ID
      } else if (res.CardId) {
        // 市民卡
        let txt = res.CardId
        if (numSlice) {
          const pre = numSlice[0]
          const next = numSlice[1]
          const preTxt = !isNull(pre) ? res.CardId.slice(0, pre) : res.CardId
          const nextTxt = !isNull(pre) ? res.CardId.slice(-next) : ''
          txt = `${preTxt}${nextTxt}`
        }
        searchText = txt
        if (txt.length == 20 || txt.length == 15) {
          // 病人ID温附二有在中，本来是20位的，现在又是15位了，000开头的
          searchWay = '病人ID' // 病人ID
        } else if (txt.length == 44 && txt.indexOf('YBDZPZ') > -1) {
          this.$message.warning('暂不支持扫描此种二维码，请通过PID等条件查询')
        } else if (txt.length == 18) {
          searchWay = '身份证号' // 身份证号
        } else {
          if (txt.length <= 44) {
            searchWay = '卡号' // 卡号
          }
        }
      }
      let params = {
        searchWay,
        searchText
      }
      console.warn('params', params)
      this.$emit('getWSCardReaderMsg', params)
    },
    // 回调
    WSCREmit(data) {
      // 取消读卡器按钮的禁用状态
      this.$store.dispatch('app/ISSMKBTNDISABLE', false)
      console.warn('WSCREmit=>data', data)
      // 如果没报错，则传递数据(没报错，不返回ErrorCode的)
      if (isNull(data.ErrorCode)) {
        this.deliverData(data)
      } else {
        let result = JSON.stringify(data)
        this.$message.warning(`返回结果：${data.Message || result}`)
        let params = {
          searchWay: '',
          searchText: ''
        }
        console.warn('params', params)
        this.$emit('getWSCardReaderMsg', params)
      }
      this.closeWebsocket()
    },
    // 发送消息
    sendMsg() {
      // jkk { operatorCode: '123', operatorName: 'admin', qrcode_info: '123456789abcdefg:0:123:456' }
      console.warn('sendMsg=>this.readerCardOption', this.readerCardOption)
      let _d = rtUtil.getTypeData(this.readerType, this.readerCardOption)
      // 医院代码需要替换
      if (this.readerType == 'dzybpz-tz') {
        // 472841502Q、472842046、05766001是玉环坎门人民医院三个院区的医院代码
        if (this.hospitalCode == '472841502Q' || this.hospitalCode == '472842046' || this.hospitalCode == '05766001') {
          // 玉环医院的机构代码是：H33108300201 玉环医院的智慧医保地址：http://10.249.81.107/
          // 温附一、温附二、玉环坎门人民医院三家医院的机构代码可能是一样的，他们总部是同一家机构
          _d.orgId = this.orgId || 'H33108300201'// H33108300201是温附二的机构代码。通过在医院实地测试，机构代码并不是医院代码this.$store.state.settings.paramConfig.hospitalCode
          _d.url = this.zhybpzapi || 'http://10.249.81.107/localcfc/api/hsecfc/localQrCodeQuery'
        } else {
          // 玉环医院的机构代码是：H33108300201 玉环医院的智慧医保地址：http://10.249.81.107/
          _d.orgId = this.orgId || 'H33108300201'// H33108300201是温附二的机构代码。通过在医院实地测试，机构代码并不是医院代码this.$store.state.settings.paramConfig.hospitalCode
          _d.url = this.zhybpzapi || 'http://100.72.5.131:8004/localcfc/api/hsecfc/localQrCodeQuery'

          if (window.g.applyInfoHospital == 'wzszxyy' || this.hospitalCode == '47052555733030211A1001') {
            _d.orgId = this.orgId || 'H33030200435'
          }
        }
      }
      if (this.readerType == 'dzybpz-fj') {
        _d.orgId = this.orgId || '3500000101'// H33108300201是温附二的机构代码。通过在医院实地测试，机构代码并不是医院代码this.$store.state.settings.paramConfig.hospitalCode
      }
      if (this.readerType == 'dzybpz') {
        if (window.g.applyInfoHospital == 'wzszxyy' || this.hospitalCode == '47052555733030211A1001') {
          _d.HospCode = this.orgId || 'H33030200435'
        } else if (window.g.applyInfoHospital == 'wenfuer' || this.hospitalCode == '47000593033030211A1001') {
          _d.HospCode = this.orgId || 'H33108300201'
        } else {
          _d.HospCode = this.orgId || 'H330302000034'
        }
      }
      // 每次发送消息后，清空Sendkeys参数，避免每次出弹窗，重复模拟了上次的刷卡记录
      if (this.readerType == 'dzybpz' || this.readerType == 'dzybpz-tz' || this.readerType == 'dzybpz-fj') {
        if (_d.SendKeys) {
          _d.SendKeys = ''
        }
      }
      // 对于福鼎市医院的磁条卡，需要把值赋值给config.js里获取到的读卡器-磁条卡的配置参数中
      if (this.readerType == 'sbjzfds-fj') { // 福鼎市的磁条卡 33位
        if (!_d.CardId) {
          let cardId = this.cardId // getLocalStorage('yjyy-CardId')
          if (cardId) {
            _d.CardId = cardId
          }
        }
      }
      if (this.applyInfoHospital == 'fuding') {
        let keys = Object.keys(_d)
        if (keys.indexOf('SendKeys') > -1) {
          delete _d.SendKeys
        }
      } else {
        if (this.readerType == 'dzybpz-fj' || this.readerType == 'dzybpz' || this.readerType == 'dzybpz-tz') {
          if (!_d.SendKeys) {
            if (queryTextNew) {
              _d.SendKeys = queryTextNew
              queryTextNew = ''
              // if (window.g.KeysDelay) {
              //   _d.KeysDelay = window.g.KeysDelay
              // }
            }
          }
        }
      }
      if (this.readerType == 'jkk' || this.readerType == 'jkk-wzeye') { // 健康卡
        // 健康卡
        _d.qrcode_info = queryTextNew
      }
      if (this.readerType == 'jyzs') { // 就医助手
        // 就医助手
        _d.Msg = queryTextNew
      }
      if (this.readerType == 'wzsmk') { // 温州市民卡
        // this.driveType
        // 这里需要判断当前机子是属于哪个院区的
        let localSetMemory = JSON.parse(getLocalStorage('localSetMemory') || `{"modalitytype":"","depArea":"","areaName":"","dep":"","deps":[]}`)
        console.log('localSetMemory', localSetMemory)
        if (localSetMemory && localSetMemory.driveType) {
          _d.mode = localSetMemory.driveType
        } else {
          const driveType = getAreaNameToDriveTypeObj(localSetMemory && localSetMemory.areaName, this.driveTypeArr)
          console.log('driveType', driveType)
          if (driveType) {
            _d.mode = driveType[1] || 0
          } else {
            _d.mode = 0
          }
        }
      }
      let _msg = {
        'Command': 'KY_GETCARD',
        'DeviceType': this.readerType,
        'Data': _d ? JSON.stringify(_d) : ''
      }
      console.warn('_msg', _msg)
      // if (!_msg.Data) {
      //   delete _msg.Data
      // }
      this.WSReader.send(_msg)
    },
    // 创建输入框的模拟事件监听
    addInputEventListener(inputId, callBack) {
      this.$nextTick(() => {
        // 监听键盘事件
        // console.warn('创建键盘模拟输入的事件监听')
        document.getElementById(inputId).addEventListener('keydown', (event) => {
          // 根据不同的键执行不同的操作
          // console.warn(`监听回车键event.keyCode:${event.keyCode},event.key:${event.key}`)
          if (event.keyCode == 13 || event.key == 'Enter') {
            let qText = callBack()
            if (qText == '*=-*' || qText.length == 28 || qText.substr(0, 4).toUpperCase() == 'FEQR' || qText.indexOf(':') > -1) {
              this.wsChange('', qText)
            }
            // PDY10023X33030211A5121是眼视光医院的代码，这家医院门诊卡是和健康卡一起调用读卡器服务的
            if (this.hospitalCode == 'PDY10023X33030211A5121' && qText.length == 20) {
              this.wsChange('', qText)
            }
            // // wzszxyy:温州市中心医院 就诊卡17位
            // if (qText.length == 17 && (this.applyInfoHospital == 'wzszxyy' || this.hospitalCode == '47052555733030211A1001')) {
            //   this.formdata.queryWay = 1 // 自动切换到卡号
            //   this.formdata.patientSource = 1 // 自动切换到门诊
            // }
            // // 好些医院的门诊卡是20位，温附二和文成县人民医院的就诊卡卡号长度是20位
            // if (qText.length == 20) {
            //   this.formdata.queryWay = 1 // 自动切换到卡号
            // }
          }
        })
      })
    },
    getTypeByQueryText(qText) {
      let name = ''
      let type = ''
      // 目前就发现这四种卡要经过读卡器服务获取患者信息，其他的都是直接读取卡或码上的内容，没有经过读卡器服务的
      if (qText == '*=-*') { // 市民卡
        name = '市民卡'
      } else if (qText.length == 28) {
        name = '医保凭证'
      } else if (qText.indexOf(':') > -1 || (qText.length == 20 && this.hospitalCode == 'PDY10023X33030211A5121')) { // PDY10023X33030211A5121是眼视光医院的代码，这家医院门诊卡是和健康卡一起调用读卡器服务的
        name = '健康卡'
      } else if (qText.substr(0, 4).toUpperCase() == 'FEQR') {
        name = '就医助手'
      }
      for (let i = 0; i < this.readerCardOption.length; i++) {
        if (this.readerCardOption[i].name == name) {
          type = this.readerCardOption[i].type
        }
      }
      return type
    },
    // 切换获取数据类型 让父页面调用wsChange也适用
    wsChange(type, queryText = '') {
      console.warn('wsChange=>type', type)
      console.warn('wsChange=>queryText', queryText)
      // this.$store.dispatch('app/ISSMKBTNDISABLE', true)
      queryTextNew = queryText
      // 根据queryText获取type
      this.readerType = type || this.getTypeByQueryText(queryText)
      console.warn('this.readerType', this.readerType)
      // this.$emit('wsChange', { type })
      if (this.readerFlag) return
      this.timerRun() // 防抖
      if (this.WSReader && this.WSReader.ws) {
        console.warn('wsChange=>sendMsg')
        this.sendMsg()
      } else {
        console.warn('wsChange=>wsInit')
        this.wsInit()
      }
    },
    /**
     * 判断是否去查询申请单
     * @param qText
     * @param callBackToSearch 直接查询
     * @param callBackNoSearch 不去查询，因为要把数据先交给读卡器服务
     */
    searchJudge(qText, callBackToSearch, callBackNoSearch) {
      console.log('searchJudge=>qText', qText)
      // wzszxyy:温州市中心医院 就诊卡17位
      // if (qText.length == 17 && (this.applyInfoHospital == 'wzszxyy' || this.hospitalCode == '47052555733030211A1001')) {
      //   this.formdata.queryWay = 1 // 自动切换到卡号
      //   this.formdata.patientSource = 1 // 自动切换到门诊
      // }
      // // 好些医院的门诊卡是20位，温附二和文成县人民医院的就诊卡卡号长度是20位
      // if (qText.length == 20) {
      //   this.formdata.queryWay = 1 // 自动切换到卡号
      // }
      let params = {
        searchWay: '',
        patientSource: '',
        searchText: qText
      }
      console.log('params', params)
      console.log('applyInfoHospital', this.applyInfoHospital)
      if (this.applyInfoHospital == 'fuding') { // 福鼎市医院
        console.log('福鼎市医院')
        if (qText == '*=-*') {
          // 市民卡先刷出的是*=-*
          params.searchWay = '卡号'
          callBackNoSearch(params)
        } else if (qText.length == 28) {
          // 电子医保凭证28位
          params.searchWay = '身份证号' // 身份证号
          callBackNoSearch(params)
        } else if (qText.length == 33) {
          // 门诊卡33位,刷出结果10位
          this.doCardInit(qText)
        } else {
          // console.log('进入身份证号判断')
          if (qText.length == 18 && isIdCard(qText)) {
            params.searchWay = '身份证号' // 身份证号330327199207250810
          }
          console.log('params', params)
          callBackToSearch(params)
        }
      } else if (this.hospitalCode == '42000280-3' || this.applyInfoHospital == 'whtyyy') { // whtyyy
        if (qText.length == 6) { // 42000280-3 是武汉天佑医院的医院代码
          params.searchWay = '住院号'
          callBackToSearch(params)
        } else {
          params.searchWay = 'PID'
          callBackToSearch(params)
        }
      } else { // 其他医院
        if (qText == '*=-*') {
          // 市民卡先刷出的是*=-*
          params.searchWay = '卡号'
          callBackNoSearch(params)
        } else if (qText.length == 28) {
          // 医保凭证刷出的是28位
          params.searchWay = '身份证号' // 身份证号
          callBackNoSearch(params)
        } else if (qText.substr(0, 4).toUpperCase() == 'FEQR') {
          // 医院里的就医助手二维码刷出的是68或116位
          // this.formdata.queryWay = 10 // 病人ID
          params.searchWay = '病人ID'
          callBackNoSearch(params)
        } else if (qText.indexOf(':') > -1) {
          // 健康码中有":"
          // this.formdata.queryWay = 10 // 病人ID
          params.searchWay = '病人ID'
          callBackNoSearch(params)
        } else if (qText.length == 20 && (qText.substr(0, 3) == '000')) {
          console.warn('this.hospitalCode', this.hospitalCode)
          // 20位 00021211502052131632 // 就诊卡对应卡号还是病人ID
          // this.formdata.queryWay = this.jskQueryWay || 1 // 卡号
          if (window.g.applyInfoHospital == 'wenfuer' || this.hospitalCode == '47000593033030211A1001') {
            params.searchWay = '卡号'
            callBackToSearch(params)
          } else if (this.hospitalCode == 'PDY10023X33030211A5121') { // PDY10023X33030211A5121是眼视光医院的代码，这家医院门诊卡是和健康卡一起调用读卡器服务的        name = '健康卡'
            params.searchWay = '病人ID'
            callBackNoSearch(params)
          } else {
            params.searchWay = '卡号'
            callBackToSearch(params)
          }
        } else if (qText.length == 15 && (qText.substr(0, 3) == '000')) {
          // this.formdata.queryWay = 10 // 病人ID
          params.searchWay = '病人ID'
          callBackToSearch(params)
        } else if (qText.length == 17 && (this.applyInfoHospital == 'wzszxyy' || this.hospitalCode == '47052555733030211A1001')) {
          console.log('自动切换到卡号')
          // this.formdata.queryWay = 1 // 自动切换到卡号
          params.searchWay = '卡号'
          params.patientSource = 1 // 自动切换到门诊
          callBackToSearch(params)
        } else if (qText.length == 20 && (this.applyInfoHospital == 'wcxrmyy' || this.applyInfoHospital == 'wenfuer' || this.hospitalCode == '47000593033030211A1001')) {
          // this.formdata.queryWay = 1 // 自动切换到卡号
          params.searchWay = '卡号'
          callBackToSearch(params)
        } else {
          // params.searchWay = '卡号'
          if (qText.length == 18 && isIdCard(qText)) {
            // this.formdata.queryWay = 6 // 身份证号
            params.searchWay = '身份证号' // 身份证号
          }
          callBackToSearch(params)
        }
      }
    },
    doCardInit(qText) {
      if (this.readerCardOption && this.readerCardOption.length > 0) {
        this.readerCardOption[1].data.CardId = qText
        this.$store.dispatch('patient/setCardId', qText)
      } else {
        alert('请先在config.js中配置读卡器参数')
      }
      this.$nextTick(() => {
        this.readerType = 'sbjzfds-fj' // 福建省的磁条卡
        this.wsInit()
      })
    },
    // 重复请求拦截计时，1秒内无法重复刷 等于防抖
    timerRun() {
      this.closeTimer()
      this.readerFlag = true
      this.warnNum = 0
      window.timer = setInterval(() => {
        this.timeNum++
        if (this.timeNum === 5) {
          this.closeTimer()
        }
      }, 200)
    },
    closeTimer() {
      window.timer && clearInterval(window.timer)
      this.readerFlag = false
      window.timer = null
      this.timeNum = 0
    }
  },
  beforeDestroy() {
    this.WSReader && this.WSReader.ws && this.WSReader.ws.close()
  }
}
</script>

<style lang="scss" scoped>
$warningColor: #ff7600;
.ws_btn{
  display: inline-block;
  height: 30px;
  line-height: 30px;
  min-width: 70px;
  padding: 0 5px;
  text-align: center;
  font-size: 14px;
  color: $warningColor;
  border: solid 1px $warningColor;
  cursor: pointer;
  user-select: none;
  margin-right: 5px;
  background-color: #fff;
  &.ws_btn_on{
    color: #fff;
    background-color: $warningColor;
  }
  &:last-child{
    margin-right: 0;
  }
  &:hover{
    color: #fff;
    opacity: 0.9;
    background-color: $warningColor;
  }
  &:focus{
    opacity: 0.8;
  }
}
</style>
